import { Button, DatePicker, Form, Input, Space } from "antd";
import { TimeLine } from "@/types/content/timeLine";
interface IProps {
  onChange: (form: TimeLine.Query) => void;
}
export default function TimeLineSearchForm({ onChange }: IProps) {
  const [form] = Form.useForm();
  return (
    <Form
      layout="inline"
      form={form}
      name="TimeLineSearchForm"
      onFinish={(form) => {
        onChange(form);
      }}
      autoComplete="off"
    >
      <Form.Item<TimeLine.Query> label="内容" name="content">
        <Input placeholder="请输入关键字" allowClear size="middle" />
      </Form.Item>
      <Form.Item<TimeLine.Query> label="时间" name="time">
        <DatePicker.RangePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
      </Form.Item>

      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="middle"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
